<!DOCTYPE html>
<html>
<head>
<script src="jquery-2.1.0.js"></script>

<script src="bootstrap-3.1.1-dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="bootstrap-3.1.1-dist/css/bootstrap.css">

<script src="slider/js/bootstrap-slider.js"></script>
<link rel="stylesheet" href="slider/css/slider.css">
<script src="script-bootstrap.js"></script>

<link rel="stylesheet" href="style-bootstrap.css">

<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<div id="calc_pane">
		<div id="steps">
			<div id="step-1">
				<div id="window_wrap">
					<div id="vertical_slider_wrap">
						<input type="text" name="window_height" value="" size="4"
							id="window_height" />
						<div id="vertical_slider"></div>
						
					</div>
					<div id="window_canvas"></div>
					<div id="horizontal_slider_wrap">
						<div style="float:left">500</div><div style="float:left;width:250px"><div id="horizontal_slider"></div></div><div style="float:left">1500</div>
						 
            
						<input type="text" name="window_width" value="" id="window_width" size="4"/>
					</div>
				</div>
				<div id="params_wrap">
					<div id="window_type">
						<h4>Тип оконной конструкции</h4>
						<div id="window_type_canvas">
							<img id="window_type_canvas_img"
								src="images/1stvorki_1povorot.png" />
						</div>
						<!-- Start modal -->
						<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
							aria-labelledby="myModalLabel" aria-hidden="true">
							<div class="modal-dialog">
								<div class="modal-content">
									<div class="modal-header">
										<button type="button" class="close" data-dismiss="modal"
											aria-hidden="true">&times;</button>
										<h4 class="modal-title" id="myModalLabel">Выберите тип
											окна</h4>
									</div>
									<div class="modal-body">
										<div class="style_block" id="one_panel">
											<img src="images/1stvorki_1povorot.png" /> <img
												src="images/1stvorki_gluhoe.png" />
										</div>
										<div class="style_block" id="two_panel">
											<img src="images/2stvorki_gluhoe.png" /> <img
												src="images/2stvorki_1povorot.png" /> <img
												src="images/2stvorki_2povorot.png" />
										</div>
										<div class="style_block" id="three_panel">
											<img src="images/3stvorki_gluhoe.png" /> <img
												src="images/3stvorki_1povorot.png" /> <img
												src="images/3stvorki_2povorot.png" /> <img
												src="images/3stvorki_3povorot.png" />
										</div>
										<div class="style_block" id="door">
											<img src="images/balcon.png" />
										</div>
									</div>
								</div>
							</div>
						</div>
						<!-- End modal -->
					</div>
					<div>
						<h4>Профильная система</h4>
						<div class="btn-group" data-toggle="buttons">
						<div>
							<label class="btn "> <input type="radio"
								name="options" id="option1"> Eco
							</label> <label class="btn"> <input type="radio"
								name="options" id="option2"> Forwin
							</label> <label class="btn"> <input type="radio"
								name="options" id="option3"> Goodwin
							</label>
						<div class="separator"></div>
							<label class="btn "> <input type="radio"
								name="options" id="option1"> Nord 70
							</label> </div>
						 <label class="btn"> <input type="radio"
								name="options" id="option2"> Quadro 70
							</label> <label class="btn"> <input type="radio"
								name="options" id="option3"> Reachmont
							</label> <label class="btn"> <input type="radio"
								name="options" id="option3"> Reachmont Eco
							</label> <label class="btn"> <input type="radio"
								name="options" id="option3"> Termo
							</label>
						</div>

<!--						<div id="profile_radio" class="radio_group">
							<input type="radio" id="profile1" name="profile"> <label
								for="profile1">Профиль 1</label> <input type="radio"
								id="profile2" name="profile"> <label for="profile2">Профиль
								2</label> <input type="radio" id="profile3" name="profile"> <label
								for="profile3">Профиль 3</label> <input type="radio"
								id="profile4" name="profile"> <label for="profile4">Профиль
								4</label>
						</div> 
						-->
					</div>
					<div>
						<h4>Поворотно-откидной механизм открывания окна</h4>
						<div class="btn-group" data-toggle="buttons">
							<label class="btn"><input type="radio" id="yes" name="mech">Да</label>
							<label class="btn"><input type="radio" id="no" name="mech"
								checked="checked">Нет</label>
						</div>
					</div>
					<div>
						<h4>Ламинация</h4>
						<div id="laminat_canvas">
							<div class="laminat_item"></div>
							<div class="laminat_item"></div>
							<div class="laminat_item"></div>
							<div class="laminat_item"></div>
							<div class="laminat_item"></div>
							<div class="laminat_item"></div>
							<div class="laminat_item"></div>
							<div class="laminat_item"></div>
							<div class="laminat_item"></div>
							<div class="laminat_item"></div>
							<div class="laminat_item"></div>
							<div class="laminat_item"></div>
							<div class="laminat_item"></div>
							<div class="laminat_item"></div>
							<div class="laminat_item"></div>
							<div class="laminat_item"></div>
						</div>
						<!--  <div class="clr_bth"></div>-->
					</div>

				</div>
				<div class="clr_bth"></div>
				<a id="button-step-2">Далее</a>
			</div>
			<!--		<div id="step-2">
			<h2>Параметры окна и дополнительные опции</h2>
			<div id="params_accordion">
				<h3>Дополнительные опции</h3>
				<div>
					sadasd asd asd asd asd <br /> sadasd asd asd asd asd <br />
					sadasd asd asd asd asd <br /> sadasd asd asd asd asd <br />
					sadasd asd asd asd asd <br />
				</div>
				<h3>Дополнительные опции</h3>
				<div>
					sadasd asd asd asd asd <br /> sadasd asd asd asd asd <br />
					sadasd asd asd asd asd <br /> sadasd asd asd asd asd <br />
					sadasd asd asd asd asd <br />
				</div>
				<h3>Дополнительные опции</h3>
				<div>
					sadasd asd asd asd asd <br /> sadasd asd asd asd asd <br />
					sadasd asd asd asd asd <br /> sadasd asd asd asd asd <br />
					sadasd asd asd asd asd <br />
				</div>
				<h3>Дополнительные опции</h3>
				<div>
					sadasd asd asd asd asd <br /> sadasd asd asd asd asd <br />
					sadasd asd asd asd asd <br /> sadasd asd asd asd asd <br />
					sadasd asd asd asd asd <br />
				</div>
				<h3>Дополнительные опции</h3>
				<div>
					sadasd asd asd asd asd <br /> sadasd asd asd asd asd <br />
					sadasd asd asd asd asd <br /> sadasd asd asd asd asd <br />
					sadasd asd asd asd asd <br />
				</div>
				<h3>Дополнительные опции</h3>
				<div>
					sadasd asd asd asd asd <br /> sadasd asd asd asd asd <br />
					sadasd asd asd asd asd <br /> sadasd asd asd asd asd <br />
					sadasd asd asd asd asd <br />
				</div>
			</div>
		</div>-->
			<div id="step-2">
				<pre>
		asd as dasdsad s
		d as dasdad ad adada
		 asd asda d
		 a da dad adasd ad 
		 asd ad ad ad
		</pre>
				<a  id="button-step-1">Назад</a>
			</div>
		</div>

	</div>

</body>
</html>
